<template>
    <div id="set-address">
        <div class="setList" @click="set()">
            <div class="setList-left brief1">我的地址</div>
            <div class="setList-right brief">
                <div>
                    <span class="brief" v-for="a in address" v-if="a.defaultAdress && a.available">{{a.provinceName}}{{a.cityName}}{{a.districtName}}{{a.detailAdress}}</span>
                </div>
                <i class="iconfont icon-jiantou"></i>
            </div>
        </div>
        </div>
            <!--设置昵称-->
            <div v-if="show" class="set-wrap">
                <div id="purchased">
                    <div class="purchased-top">
                        <i class="iconfont icon-jiantou" @click="close"></i>
                        <span>{{title}}</span>
                    </div>
                </div>

                <!--新增地址列表页-->
                <div class="addressList" v-for="(add,index) in myAddress">
                    <div class="addressList-top">
                        <div>{{add.name}}<span>{{add.phone}}</span></div>
                        <div>{{add.provinceName}}{{add.cityName}}{{add.districtName}}{{add.detailAdress}}</div>
                    </div>
                    <div class="addressList-bottom">
                        <div class="tacitly" :class="{'checked1':add.defaultAdress}" @click="pitchSite(add._id,index,2)">
                            <i class="iconfont defaults" :class="{'icon-icon_right':add.defaultAdress,'icon-danxuan_moren':!add.defaultAdress}"></i>
                            默认地址
                        </div>
                        <div class="compile" @click="delAddress2(add._id)">删除</div>
                        <div class="compile" @click="comAddress(add._id)">编辑</div>
                        <!---删除地址弹窗-->
                        <div class="delectBox" v-if="delAddress">
                            <div class="delectBox-top">确认删除该地址吗？</div>
                            <div class="delectBox-btn">
                                <div class="yes font1" @click="delAdd()">确认</div>
                                <div class="no" @click="delAddNo()">取消</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--新建地址-->
                <div class="newAdress font1" @click="openAdd()"><i class="iconfont icon-jia"></i>新增地址</div>
            </div>
            <!--设置昵称-->
            <div v-if="show" class="set-wrap">
                <div id="purchased">
                    <div class="purchased-top">
                        <i class="iconfont icon-fanhui" @click="close"></i>
                        <span>{{title}}</span>
                    </div>
                </div>

                <!--新增地址列表页-->
                <div class="addAddress">
                    <div class="addressName">
                        <div class="addressName-left">收件人</div>
                        <input type="text" placeholder="姓名" maxlength="10" v-model="nameNum">
                    </div>
                    <div class="addressName">
                        <div class="addressName-left">联系电话</div>
                        <input type="number" placeholder="电话" maxlength="11" v-model="phoneNum">
                    </div>
                    <div class="addressName">
                        <div class="addressName-left">所在地区</div>
                        <div class="select" @click="setAddress()">
                            <div>
                                <span style="color:#333;">{{selectAddress}}</span>
                                <i class="iconfont icon-jiantou"></i>
                            </div>
                        </div>
                    </div>
                    <div class="addressDetail">
                        <div class="addressName-left">详细地址</div>
                        <textarea type="number" placeholder="请填写详细地址" maxlength="30" v-model="addressNum"></textarea>
                    </div>
                </div>
                <!--保存按钮-->
                <div class="SaveBtn" v-if="!saveYes">保存</div>
                <div class="okSave font1" v-if="saveYes" @click="compileOK(bjId,nameNum,phoneNum,selectAddress,addressNum)">保存</div>
                <!--新增地址-->
                <div class="distpicker" v-if="distpicker">
                    <div class="distpicker-top">
                        <span @click="closeAdd()">取消</span>
                        <span @click="addAddress()">完成</span>
                    </div>
                    <v-distpicker type="mobile" @selected="onSelected" :province="select.province" :city="select.city" :area="select.area"></v-distpicker>
                </div>
                <div class="keepOut" v-if="distpicker" @click="closeAdd()"></div>
            </div>
    </div>
</template>

<script>
    import {userService} from '../../service/userService'
    export default {
        data () {
            return {
                show:false,
                changeName:'',
                name:'',
                type:1
            }
        },
        props:['nickName','title','realName'],
        mounted(){
            let that = this
//            console.log(that);
            if(that.nickName){
                that.name = that.nickName
                that.type=1
            }
            if(that.realName){
                that.name = that.realName
                that.type=2
            }
        },
        methods:{
            //更改简介
            changebriefs:function(){
                if(this.brief == '还没有简介'||this.brief == ''){
                    this.brief = '还没有简介';
                }
                userService.myCenterSet({descripthion:this.brief}).then(function (res) {
                });
                this.setState = 1;
                this.text = '设置';
            },
            //清除名字按钮
            cleanName:function(){
                this.name = ''
            },
            set:function(){
                this.show = true
            },
            close:function(){
                this.show = false
            },
        }
    }
</script>

<style lang="less">
#set-address{
    .newAdress{
        width:100%;
        height:1.2rem;
        line-height:1.2rem;
        margin:0.27rem 0;
        background:#fff;
        font-size: 16px;
        color: #6699FF;
        letter-spacing: 0;
        i{
            margin:0 0.1rem;
            font-size:14px;
        }
    }
    .addressList{
        width:100%;
        padding:0 0.53rem;
        background:#fff;
        margin-bottom:0.27rem;
        box-sizing: border-box;
        .addressList-top{
            width:100%;
            padding:0.32rem 0;
            border-bottom:1px solid #eee;
            div{
                font-size: 14px;
                color: #1F2D3D;
                letter-spacing: 0;
                line-height:0.56rem;
                text-align: left;
                span{
                    margin:0 0.2rem;
                }
            }
        }
        .addressList-bottom{
            width:100%;
            height:1rem;
            background:#fff;
            line-height:1rem;
            .tacitly{
                width:30%;
                text-align: left;
                font-size: 13px;
                color: #666666;
                float:left;
            }
            .checked1{
                /*color:#6699FF;*/
            }
            .compile{
                width:1rem;
                height:1rem;
                line-height:1rem;
                float:right;
                font-size: 13px;
                color: #666666;
            }
        }
    }
    .addressList:nth-child(1){
        margin-top:0.27rem;
    }
    .addAddress{
        width:100%;
        padding-left:0.4rem;
        background:#fff;
        box-sizing: border-box;
        margin-top:0.27rem;
        .addressDetail{
            width:100%;
            border-bottom:1px solid #E5E9F2;
            padding-right:0.4rem;
            box-sizing: border-box;
            border-bottom:none;
            overflow: hidden;
            .addressName-left{
                width:30%;
                height:1.2rem;
                line-height:1.2rem;
                float:left;
                font-size: 14px;
                color: #333333;
                letter-spacing: 0;
                text-align: left;
            }
            .select{
                width:70%;
                height:1.15rem;
                line-height:1.2rem;
                text-align: right;
                font-size: 14px;
                color: #999999;
                float:left;
                i{
                    transform: rotate(180deg);
                    display: block;
                    float: right;
                }
                div{
                    span{
                        font-size: 14px !important;
                    }
                }
            }
            input{
                width:70%;
                height:1.15rem;
                text-align: right;
                font-size: 14px;
                color: #333333;
                border:none;
                outline: none;
            }
            textarea{
                width:70%;
                height:1.79rem;
                line-height: 0.6rem;
                padding: 0.3rem 0;
                text-align: right;
                font-size: 14px;
                color: #333333;
                border:none;
                outline: none;
                resize:none;
            }
            input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
                color:#999999;
            }
            input::-moz-placeholder,textarea::-moz-placeholder{
                color:#999999;
            }
            input:-ms-input-placeholder,textarea:-ms-input-placeholder{
                color:#999999;
            }
        }
        .addressName{
            width:100%;
            height:1.2rem;
            border-bottom:1px solid #E5E9F2;
            padding-right:0.4rem;
            box-sizing: border-box;
            overflow: hidden;
            .addressName-left{
                width:30%;
                height:1.2rem;
                line-height:1.2rem;
                float:left;
                font-size: 14px;
                color: #333333;
                letter-spacing: 0;
                text-align: left;
            }
            .select{
                width:70%;
                height:1.2rem;
                line-height:1.2rem;
                text-align: right;
                font-size: 14px;
                color: #999999;
                float:left;
                i{
                    transform: rotate(180deg);
                    display: block;
                    float: right;
                }
            }
            input{
                width:70%;
                height:1.15rem;
                text-align: right;
                font-size: 14px;
                color: #333333;
                border:none;
                outline: none;
            }
            textarea{
                width:70%;
                height:1.79rem;
                text-align: right;
                font-size: 14px;
                color: #333333;
                border:none;
                outline: none;
                resize:none;
            }
            input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
                color:#999999;
            }
            input::-moz-placeholder,textarea::-moz-placeholder{
                color:#999999;
            }
            input:-ms-input-placeholder,textarea:-ms-input-placeholder{
                color:#999999;
            }
        }
        .addressName:last-child{
            border-bottom:none;
        }
    }
}

</style>